<template>
	<view class="historyList">
		<view class="copyApplayPadding">
			
			<view class="listItem" v-for="(item,index) in listData" >
				<view class="top">
					<text class="orderCode">订单号:{{item.code}}</text>
					<!-- 0待提交，1待审核，2审核通过，3审核不通过，4已支付，5已邮寄，9已关闭 -->
					<text class="orderState" v-if="item.status == 0">待提交</text>
					<text class="orderState" v-else-if="item.status == 1">待审核</text>
					<text class="orderState" v-else-if="item.status == 2">审核通过</text>
					<text class="orderState" v-else-if="item.status == 3">审核不通过</text>
					<text class="orderState" v-else-if="item.status == 4">已支付</text>
					<text class="orderState" v-else-if="item.status == 5">已邮寄</text>
					<text class="orderState" style="color: ;" v-else="item.status == 9">已关闭</text>
					<text class="orderState" v-else-if="item.status == 3">审核不通过</text>
				</view>
				<u-divider></u-divider>
				<view class="details">
					<view class="left" @click="toDetails(item.id)">
						<text class="name">姓名:{{item.hzxm}}</text>
						<text class="ipNo">住院号:{{item.blh}}</text>
						<text class="ipNo">份数:{{item.anum}}</text>
						<text class="orderTime">{{item.createTime}}</text>
					</view>
					<view class="right">
						<text  class="action-btn lookBtn" style="font-size: 30upx;" @click="toDetails(item.id)">查看</text>
						<text v-if="item.status == '5'"  class="action-btn payBtn" @click="viewlogistics(item.deCompanyCode,item.deNo)" style="font-size: 30upx;">物流</text>
						<text v-else-if="item.status == '2'" @click="payEvent(item.id)" class="action-btn payBtn" style="font-size: 30upx;">支付</text>
					</view>
				</view>
				
				<view class="bgLine">
					
				</view>
				
			</view>
			
			
			<u-empty
					v-if="!noListData"
			        mode="history"
			        icon="http://cdn.uviewui.com/uview/empty/history.png"
			>
			</u-empty>
			
			
		</view>
	</view>
</template>

<script>
import {
	getApplyList
}from '@/api/index.js'
	export default{
		data(){
			return{
				pageNum:1,
				pageSize:10,
				noData:false,
				listData:[],
				noListData:false
			}
		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			if(!this.noData){
				this.pageNum++;
				this.getList(this.pageNum)
			}else{
				uni.showToast({
					title:'暂无数据',
					icon:'none'
				})
			}
			
		},
		methods:{
			getList(pageNum){
				const data={
					pageNum:this.pageNum,
					pageSize:this.pageSize
				}
				uni.showLoading({
					title:'加载中...'
				})
				getApplyList(data).then(res=>{
					uni.hideLoading()
					if(res.retData.list.length != 0){
						this.noListData = true;
						if(this.pageNum == 1){
							this.listData = [];
							this.listData = res.retData.list;
						}else{
							this.listData = this.listData.concat(res.retData.list);
						}
						this.noData = false
					}else{
						if(this.pageNum == 1){
							this.noListData = false;
						}else{
							this.noListData = true;
						}
						this.noData = true
					}
					
					
				})
			},
			
			
			
			/* 点击查看快递 */
			viewlogistics(deCompanyCode,deNo){
				uni.navigateTo({
				  url: '/pages/webview/webview?url=' + encodeURIComponent("https://m.kuaidi.com/all/youzhengguonei/"+deNo+".html")
				});
			},
			
			toDetails(id){
				uni.navigateTo({
					url:'/pages/applyDetailsView/applyDetailsView?id='+id
				})
			},
			payEvent(id){
				uni.navigateTo({
					url:'/pages/pay/pay?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.copyApplayPadding{
		/* padding: 20upx; */
		width: 100%;
		box-sizing: border-box;
		.listItem{
			width: 100%;
			.top{
				display: flex;
				width: 100%;
				font-size: 30upx;
				padding:0 20upx;
				box-sizing: border-box;
				.orderCode{
					flex: 1;
				}
				.orderState{
					color: $uni-color-primary;
				}
			}
			.details{
				width: 100%;
				display: flex;
				padding:0 20upx;
				box-sizing: border-box;
				.left{
					width: 50%;
					display: flex;
					flex-direction: column;
					font-size: 30upx;
					.name{
						margin-bottom: 20upx;
					}
					.ipNo,.orderTime{
						color: $uni-text-color-grey;
						margin-bottom: 20upx;
					}
				}
				.right{
					width: 50%;
					display: flex;
					flex-direction: row-reverse;
					align-items: flex-end;
					justify-content: right;
					padding-bottom: 10upx;
					.action-btn{
						display: block;
						width: 150upx;
						height: 60upx;
						margin: 0;
						line-height: 60rpx;
						color: #303133;
						background: #fff;
						border-radius: 100px;
						text-align: center;
					}
					.lookBtn{
						color: $uni-color-primary;
						border: 1px solid  $uni-color-primary;
					}
					.payBtn{
						margin-right: 24rpx;
						color: $uni-color-error;
						border: 1px solid  $uni-color-error;
					}
					
				}
				
			}
			.bgLine{
				width: 100%;
				height: 10upx;
				background-color: $uni-bg-color-grey;
				margin: 30upx 0px;
			}
		}
	}
	
</style>